<template>
  <view>
    <movable-area class="movable">
      <movable-view direction="all" :scale-min="1" scale :style="{width:`${bgWidth}px`,height:`${bgHeight}px`}">
        <image :src="bg" @load="loadBg" class="bg"></image>
        <view class="shop" v-for="item in list" @click="openPop(item)"
              :style="{top:`${item.y*scale}px`,left:`${item.x*scale}px`,width:`${item.width}px`,height:`${item.height}px`
			  ,color:`${item.color}` }">
          {{ item.name }}
		  <!-- <image src="../../static/images/5-001.png" style="width:25px;height:25px"></image> -->
        <image :src="item.acttypeimg" style="width:25px;height:25px"></image>
                
		</view>
      </movable-view>
      <uni-popup ref="popup" :mask-click="false" type="center" borderRadius="10px 10px 0 10px"
                 background-color="rgba(255,255,255)">
        <view class="pop">
          <view>活动简介:{{ actname }}</view>
          <view style="text-align: center" @click="gotostore">跳转商户</view>
          <view style="text-align: center" @click="closePop">关闭</view>
        </view>
      </uni-popup>
      <view class="floorList" :style="{height:(floorList.length*80)+'rpx'}">
        <view class="floor" :class="{'active':floorIndex==index}" v-for="(item,index) in floorList"
              @click="chooseFloor(item,index)">
          {{ item.levelname }}
		  
        </view>
      </view>
    </movable-area>

  </view>
</template>

<script>
import {doornumlistm_picdetail,m_floorPlanListByid} from '@/api/store.js';
	import { mapGetters } from "vuex";
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { toLogin } from '@/libs/login.js';
export default {
  data() {
    return {
      bg: '',
      bgWidth: 0,
      bgHeight: 0,
      scale: 1,
      list: [],
      id: 0,
      actname: '',
      storeid: 0,
      floorList: [],
      floorIndex: 0,
	  houseno:0,
	  bid:0
    }
  },
  computed: mapGetters(['isLogin', 'viewColor']),
  onLoad: function (options) {
	  
	  
	  if (this.isLogin) {
		  this.houseno = options.houseno || 0;
		  this.bid = options.bid || 0;
		  // console.log("ss",this.id);
		  // this.getDoornumlist(options.id);
		  // this.getFloorList()
		  
		  console.log("sdfsd-",options.scene);
		  if (options.scene) {
		  	// 扫码进
		  	const scene = decodeURIComponent(options.scene);
		     // console.log("bid-",this.$util.getQueryString('bid', scene));
		     // let bid=this.getQueryString('bid',scene) || '';
		      let bid=this.getUrlParam('bid',scene) || '';
			  let houseno=this.getUrlParam('houseno',scene) || '';
		     
		     console.log("bid-",bid,'houseno-',houseno);
		  	// let bid = this.$util.getQueryString('bid', scene);
		  			
		  	if (bid) {
		  	   this.bid=bid;
			   uni.setStorageSync('wx_bid',bid);	
		  	}else{
				this.bid=0;
			}
			
			if (houseno) {
			   this.houseno=houseno;
			   uni.setStorageSync('wx_houseno',houseno);	
			}else{
				this.houseno=0;
			}
			
		  
		  }else{
			   uni.setStorageSync('wx_bid',this.bid);				
			   uni.setStorageSync('wx_houseno',this.houseno);	
			
			
			
		  } 
		  
		  
		  this.getFloorlistD()
	  }else{
		   toLogin()
	  }
	  
	  
   
  },
  onShow() {

  },
  onReady: function () {

  },

  methods: {
	  getUrlParam(name, str) {
	  		        let regs = new RegExp("scene=", "g"); //场景值
	  		        str = str.replace(regs, ""); 
	  		        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	  		        var array = str.match(reg);
	  		        if (array != null)
	  		            return array[2];
	  },
	  
	  getQueryString(url, name){
	      var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
	      var r = url.substr(1).match(reg)
	      if (r != null) {
	          return r[2]
	      }
	      return null;
	  },
    //获取楼层
    getFloorList() {
      this.floorList=[{id: 0, name: '1F', name_en: 'FLOOR1'}, {id: 1, name: '2F', name_en: 'FLOOR2'}, {
        id: 2,
        name: '3F',
        name_en: 'FLOOR3'
      }, {id: 3, name: '4F', name_en: 'FLOOR4'}, {id: 4, name: '5F', name_en: 'FLOOR5'}, {
        id: 5,
        name: '6F',
        name_en: 'FLOOR6'
      }]
    },
	
	getFloorlistD(){
		let houseno=0;
		if(this.houseno){
			houseno=this.bid;
		}
		let para={
			houseno:this.houseno,
			bid:this.bid
		}
		// houseno
		m_floorPlanListByid(para).then(res => {
		  if (res.status == 200) {
			let foorlistarr=res.data.list;
		    this.floorList=foorlistarr;
			//默认1
			console.log(foorlistarr[0]);
		    this.bg = foorlistarr[0].image_input;
		    this.list = foorlistarr[0].ichnography_json;
		  } else {
		    uni.showToast({
		      title: res.message,
		      icon: 'none'
		    })
		
		  }
		
		}).catch(err => {
		  uni.showToast({
		    title: err,
		    icon: 'none'
		  })
		})
	},
	 
	
    //选择楼层
    chooseFloor(item, index) {
      this.floorIndex = index
	  
	  
	  // this.floorList=foorlistarr;
	  let countlevel=this.floorList.length;
	  
	  
	  //默认1
	  console.log("countlevel",countlevel,"index",index);
	  this.bg = this.floorList[index].image_input;
	  this.list =this.floorList[index].ichnography_json;
	  
	  
	  // let doornuminfo = res.data.info;
	  // this.bg = doornuminfo.image_input;
	  // this.list = doornuminfo.ichnography_json;
	  
      //this.getDoornumlist(item.id)
    },
    // 获取商品详情
    getDoornumlist: function (id) {
      doornumlistm_picdetail(id).then(res => {
        if (res.status == 200) {
          let doornuminfo = res.data.info;
          this.bg = doornuminfo.image_input;
          this.list = doornuminfo.ichnography_json;
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })

        }

      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        })
      })
    },
   
	openPop(opt) {
      this.$refs.popup.open()
      this.actname = opt.actname;
      this.storeid = opt.storeid;

    },
    closePop() {
      this.$refs.popup.close()
      // uni.navigateTo({
      //   url:'/pages/users/user_goods_collection/index'
      // })
    },

    gotostore() {
      this.$refs.popup.close()
      // pages/store/home/index
      uni.navigateTo({
        url: '/pages/store/home/index?id=' + this.storeid
      })
    },


    loadBg(event) {
      const width = event.detail.width
      const height = event.detail.height
      const res = uni.getSystemInfoSync();
      const scale1 = res.windowWidth / width
      const scale2 = res.windowHeight / height
      this.scale = scale1 < scale2 ? scale1 : scale2
      this.bgWidth = width * this.scale;
      this.bgHeight = height * this.scale;
      // this.list = [
      //   {x: 80, y: 230, width: 80, height: 100, name: '101', activity: '活动1'},
      //   {x: 230, y: 220, width: 160, height: 50, name: '101', activity: '活动2'},
      // ]
    },

  }
}
</script>

<style lang="scss" scoped>
.pop {
  padding: 10px;
  width: 400rpx;
  border-radius: 10px;
}

.movable {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .shop {
    position: absolute;
    // background-color: rgba(0, 0, 0, .1);
    // color: red !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15rpx
  }

  .floorList {
    position: absolute;
    right: 0;
    bottom: 300rpx;
    width: 80rpx;

    .floor {
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: rgba(255,255,255,.5);
    }

    .active {
      background-color: #F23A19;
      color: white;
    }
  }
}
</style>
